<template>
  <div>
    冯博
    <!-- 头部卡片 -->
    <el-card class="box-card">
      <el-form ref="form" :model="reslist">
        <el-row>
          <el-col :span="6">
            <el-form-item label="标签名称" label-width="80px" prop="tags">
              <!-- 输入框 -->
              <el-input placeholder="请输入内容" v-model="reslist.tags"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" label-width="80px" prop="provinces">
              <!-- 城市 -->
              <el-select v-model="reslist.province" placeholder="请选择" @change="changeCity">
                <el-option v-for="(item, index) in provincesList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地区" label-width="80px" prop="city">
              <el-select v-model="reslist.city" placeholder="请选择">
                <el-option v-for="(item, index) in citysList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" label-width="80px" prop="shortName">
              <!-- 输入框 -->
              <el-input placeholder="请输入内容" v-model="reslist.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" label-width="80px" prop="state">
              <!-- 状态框 -->
              <el-select v-model="reslist.state">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px">
              <el-button size="small" @click="clearAll()">清空</el-button>
              <el-button size="small" type="primary" @click="getlist">搜索</el-button>
            </el-form-item>
          </el-col>
          <div class="box">
            <el-button type="success" icon="el-icon-edit" size="small" @click="dialogVisible = true">新增用户</el-button>
          </div>
        </el-row>
      </el-form>
      <!-- 显示有几条数据 -->
      <el-alert :title="`共有${counts}条记录`" type="info" left show-icon :closable="false">
      </el-alert>
      <el-table :data="list">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="number" label="企业编号" align="center"></el-table-column>
        <el-table-column prop="shortName" label="企业简称" align="center"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="shortName" label="创建者" align="center"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" align="center">
          <template slot-scope="{row}">
            {{row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="primary" icon="el-icon-edit" circle plain @click="editItem(scope.row)"></el-button>
            <!-- 状态按钮 -->
            <el-button @click="changeBtn(scope.row)" type="success" icon="el-icon-check" circle plain
              v-if="scope.row.state === 0||null"></el-button>
            <el-button v-else @click="changeBtn(scope.row)" type="warning" icon="el-icon-close" circle plain>
            </el-button>
            <!-- 删除按钮 -->
            <el-button @click="removeBtn(scope.row.id)" type="danger" icon="el-icon-delete" circle plain></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination style="margin-top:20px" background @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="reslist.page" :page-sizes="[10, 20, 30, 50]"
          :page-size="reslist.pagesize" layout="prev, pager,next,jumper,total,sizes" :total="counts">
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增用户列表 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" @close='btnCancel'>
      <el-form :model="addItem" label-width="150px" class="box-input" ref="addFormRef" :rules="rules">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="addItem.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="addItem.company"></el-input>
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市名称" prop="province">
          <el-row type="flex">
            <el-select placeholder="请选择" v-model="addItem.province" @change="changeCity">
              <el-option v-for="(item, index) in provincesList" :key="index" :value="item" :label="item"></el-option>
            </el-select>
            <el-select placeholder="请选择" v-model="addItem.city" style="margin-left:10px">
              <el-option v-for="(item, index) in citysList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-row>
        </el-form-item>
        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="addItem.tags"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="remarks">
          <el-input type="textarea" v-model="addItem.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="addPreservation">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog title="编辑用户" width="50%" :visible.sync="editVisible" @close='btnCancel1'>
      <el-form :model="editList" label-width="150px" class="box-input" ref="editFormRef" :rules="rules">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="editList.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="editList.company"></el-input>
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市名称" prop="province">
          <el-select placeholder="请选择" v-model="editList.province" @change="changeCity">
            <el-option v-for="(item, index) in provincesList" :key="index" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="city">
          <el-select placeholder="请选择" v-model="editList.city">
            <el-option v-for="(item, index) in citysList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="editList.tags"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="remarks">
          <el-input type="textarea" v-model="editList.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancel1">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { list, add, detail, disabled, remove, update } from '@/api/hmmm/companys'
export default {
  name: 'company',
  data () {
    return {
      list: [],
      // 内容
      reslist: {
        page: 1,
        pagesize: 10,
        city: null,
        province: null,
        shortName: null,
        state: null,
        tags: null
      },
      counts: 0,
      provincesList: [],
      citysList: [],
      dialogVisible: false,
      editVisible: false,
      // 添加
      addItem: {
        // 标签
        tags: '',
        // 企业简称
        shortName: '',
        // 所属公司
        company: '',
        // 介绍
        remarks: '',
        city: '',
        province: '',
        isFamous: false
      },
      // 编辑
      editList: {
        id: '',
        // 标签
        tags: '',
        // 企业简称
        shortName: '',
        // 所属公司
        company: '',
        // 介绍
        remarks: '',
        city: '',
        province: '',
        isFamous: false
      },
      //  校验规则
      rules: {
        tags: [{ required: true, message: '请填写标签', trigger: 'blur' }],
        shortName: [
          { required: true, message: '企业名称不能为空', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '所属公司不能为空', trigger: 'blur' }
        ],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '城市不能为空', trigger: 'blur' }]
      }
    }
  },

  created () {
    /* 渲染城市 */
    this.displayProvinces()
    this.getlist()
  },

  methods: {
    // 调用接口请求数据
    async getlist () {
      const res = await list(this.reslist)
      this.list = res.data.items
      this.counts = res.data.counts
    },
    // 调用接口请求城市数据
    displayProvinces () {
      const res = provinces()
      this.provincesList = res
    },
    // 页码
    handleSizeChange (newSize) {
      this.reslist.pagesize = newSize
      this.getlist()
    },
    handleCurrentChange (newPage) {
      this.reslist.page = newPage
      this.getlist()
    },
    // 区域
    changeCity (value) {
      this.city = ''
      this.citysList = citys(value)
    },
    // 清空按钮
    clearAll () {
      this.$refs.form.resetFields()
      this.reslist.city = ''
      this.reslist.province = ''
      this.getlist()
    },
    // 弹框确定按钮 发送到后台
    addPreservation () {
      this.$refs.addFormRef.validate(async a => {
        if (!a) return
        try {
          await add(this.addItem)
          this.$message.success('添加成功')
          this.getlist()
        } catch (error) {
          console.log(error)
        }

        this.dialogVisible = false
      })
    },
    // 编辑用户 请求数据
    async editItem (val) {
      this.editVisible = true
      const { data: res } = await detail(val)
      console.log(res)
      this.editList = res
    },
    // 点击状态按钮时改变状态
    changeBtn (row) {
      this.$confirm('已成功禁用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.state === 0 || null) {
            row.state = 1
          } else {
            row.state = 0
          }
          try {
            await disabled(row)
            this.$message.success('更新成功')
            this.getlist()
          } catch (err) {
            console.log(err)
            this.$message('修改失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 删除事件
    removeBtn (id) {
      this.$confirm('已成功删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          const res = await list(this.reslist)
          if (res.data.items.length === 0) {
            if (this.reslist.page > 1) {
              this.reslist.page--
            } else {
              this.reslist.page = 1
            }
          }
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 提交编辑表单
    submitEdit () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        try {
          await update({ ...this.editList, isFamous: true })
          this.$message.success('更新成功！')
          this.getlist()
          this.editVisible = false
        } catch (err) {
          this.$message.error('更新失败')
        }
      })
    },
    btnCancel () {
      this.$refs.addFormRef.resetFields()
      this.dialogVisible = false
    },
    btnCancel1 () {
      this.$refs.editFormRef.resetFields()
      this.editVisible = false
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 10px;
}
.box {
  float: right;
}
.block {
  text-align: right;
  margin-top: 10px;
}
.box-input {
  text-align: center;
  width: 500px;
  padding-left: 100px;
}
</style>
